<script setup>
import { onBeforeUnmount, shallowRef, watch,ref } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";

const props = defineProps({
  modelValue: {
    type: String,
    default: "<p></p>"
  },
  placeholder: {
    type: String,
    default: "请输入内容..."
  },
  toolbarConfig: {
    type: Object,
    default: () => ({
      toolbarKeys: [
        "bold",
        "italic",
        "underline",
        "color",
        "bgColor",
        "|",
        "justifyLeft",
        "justifyRight",
        "justifyCenter",
        "justifyJustify",
        '|',
        "bulletedList",
        "numberedList",
        "|",
        "undo",
        "redo",
      ]
    })
  },
  editorConfig: {
    type: Object,
    default: () => ({})
  },
  height: {
    type: [String, Number],
    default: "500px"
  }
});

const emit = defineEmits(["update:modelValue", "created", "change"]);

const editorRef = shallowRef();
const editorValue = ref(props.modelValue);

// 合并默认配置和传入的配置
const mergedEditorConfig = {
  placeholder: props.placeholder,
  ...props.editorConfig
};

// 编辑器创建回调
const handleCreated = (editor) => {
  editorRef.value = editor;
  emit("created", editor);
};

// 内容变化处理
const handleChange = (editor) => {
  const html = editor.getHtml();
  emit("update:modelValue", html);
  emit("change", html);
};

// 销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

// 监听外部传入的 modelValue 变化
watch(() => props.modelValue, (newVal) => {
  const editor = editorRef.value;
  if (editor && editor.getHtml() !== newVal) {
    editor.setHtml(newVal);
  }
});
</script>

<template>
  <div class="editor-container">
    <Toolbar
      class="editor-toolbar"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
    />
    <Editor
      :style="{ minHeight: typeof height === 'number' ? `${height}px` : height }"
      class="custom-editor"
      :modelValue="modelValue"
      :defaultConfig="mergedEditorConfig"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<style scoped>
/* 覆盖编辑器CSS变量 */
.editor-container {
  /* 文本区域背景色 */
  --w-e-textarea-bg-color: rgba(23, 23, 23, 0.5); /* 浅灰色背景 */
  --w-e-textarea-color: color rgb(229, 229, 229); /* 文字颜色 */
  --w-e-textarea-border-color: rgb(38, 38, 38); /* 边框颜色 */

  /* 工具栏样式 */
  --w-e-toolbar-bg-color: rgba(23, 23, 23, 0.5); /* 工具栏背景 */
  --w-e-toolbar-color: rgb(229, 229, 229); /* 工具栏图标颜色 */
  --w-e-toolbar-active-color: rgb(229, 229, 229);
  --w-e-toolbar-border-color: rgb(38, 38, 38); /* 边框颜色 */
  --w-e-toolbar-active-bg-color: rgba(25, 25, 25, 0.5); /* 激活状态背景 */

  border: 1px solid var(--w-e-textarea-border-color);
  border-radius: 5px;
}

/* 确保样式应用到编辑器 */
:deep(.w-e-text-container) {
  background-color: var(--w-e-textarea-bg-color) !important;
}

:deep(.w-e-toolbar) {
  background-color: var(--w-e-toolbar-bg-color) !important;
  border-bottom: 1px solid var(--w-e-textarea-border-color) !important;
}

.editor-container {
  background-color: var(--w-e-textarea-bg-color);
}
</style>